<template>
    <!-- 项目容器 start-->
    <div class="app">
        <TopBar></TopBar>
        <!-- 首页正文 start -->
        <div class="content-box">
            <!-- <HomePage></HomePage> -->
            <!-- <component :is="pageName"></component> -->
            <transition
                 enter-active-class="animated fadeInRight"
                leave-active-class="animated fadeOutLeft"
            >
                <router-view></router-view>
            </transition>
        </div>
        <!-- 首页正文 end -->
        <!-- <BottomBar v-show="$route.meta.showBottom"></BottomBar> -->
        <component :is="$route.meta.bottomName"></component>
        <FiexdBtn v-show="!$route.meta.hideBtn"></FiexdBtn>
    </div>
    <!-- 项目容器 end-->
</template>
<script>
import TopBar from './components/TopBar'
import BottomBar from './components/BottomBar'
import FiexdBtn from './components/FiexdBtn'
// import HomePage from "./pages/HomePage"
// import FilmsPage from "./pages/FilmsPage"
// import DetailPage from './pages/DetailPage'
// import NotFound from './pages/NotFound'

export default {
    components:{
        TopBar,
        BottomBar,
        FiexdBtn,
        // HomePage,
        // FilmsPage,
        // DetailPage,
        // NotFound
    },
    data(){
        return {
            // pageName:"HomePage"
        }
    },
    mounted(){
        // console.log(this.$route);
    }
};
</script>
<style lang="less">
@import "./css/base.less";
</style>
<style lang="less" scoped>
.content-box{
    background-color: @gray-light;
    position: absolute;
    top: @topHeight;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
}
</style>